{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'web/plugin/editor-md/css/editormd.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'web/plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
    <style>
        #editor.fullscreen .modal-dialog {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #editor.fullscreen .modal-content {
            height: 100%;
            border: 0;
        }

        #editor.fullscreen .modal-body {
            height: 100%;
            overflow: auto;
        }

        .comment-area .item {
            margin-top: 20px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .comment-area .right-info {
            padding-left: 35px;
        }

        .comment-area .right-info .desc .msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .comment-area .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }

        .editormd-fullscreen {
            z-index: 1001;
        }


        .editormd-preview-close-btn {
            color: orange;
            padding: 4px 6px;
            font-size: 18px;
            -webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            -ms-border-radius: 500px;
            -o-border-radius: 500px;
            border-radius: 500px;
            display: none;
            background-color: red;
            position: absolute;
            top: 25px;
            right: 35px;
            z-index: 19;
            -webkit-transition: background-color 300ms ease-out;
            /* Safari, Chrome */
            -moz-transition: background-color 300ms ease-out;
            /* Firefox 4.0~16.0 */
            transition: background-color 300ms ease-out;
            /* IE >9, FF >15, Opera >12.0 */
        }

        .editormd-preview-close-btn:hover {
            background-color: red;
        }

    </style>


{% endblock %}

{% block content %}

    <div class="container-fluid clearfix" style="padding: 20px 0;">

        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading edit-heading">
                    <div>
                        <i class="fa fa-edit" aria-hidden="true"></i> 更新需求 {% if id %}#{{ id }}{% endif %}
                        {% if story_object.using_time %}
                            <span style="text-align: center">已完成,用时:{{ story_object.using_time }}</span>
                        {% endif %}

                        {% comment %}   {% if is_collected %}
                            <a style="float:right;color: darkkhaki">[已收藏]</a>
                        {% else %}
                            <a href="" onclick="collect({{ id }},{{ issues_pk }})"
                               style="float:right">[收藏]</a>
                        {% endif %}{% endcomment %}
                    </div>

                </div>
                <div class="panel-body">
                    <form id="editForm" class="form-horizontal" method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="{{ form.story_name.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.story_name.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <div>
                                        {{ form.story_name }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.story_type.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.story_type.label }}</label>
                            <div class="col-md-4">
                                <div>
                                    <div>
                                        {{ form.story_type }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <label for="{{ form.version.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.version.label }}</label>
                            <div class="col-md-4">
                                <div>
                                    <div>
                                        {{ form.version }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.module.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.module.label }}</label>
                            <div class="col-md-4">
                                <div>
                                    <div>
                                        {{ form.module }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                            <label for="{{ form.milestone.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.milestone.label }}</label>
                            <div class="col-md-4">
                                <div>
                                    <div>
                                        {{ form.milestone }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>
                        <div class="form-group" id="desGroupDiv">
                            <label for="{{ form.description.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.description.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    <button type="button" id="fullscreen-btn">全屏切换
                                    </button>
                                    <label id="browserTip">使用谷歌或火狐来进行编辑获得最佳体验</label>
                                    <div id="editor">
                                        {{ form.description }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form.acceptance_criteria.id_for_label }}"
                                   class="col-md-2 control-label">{{ form.acceptance_criteria.label }}</label>
                            <div class="col-md-10">
                                <div>
                                    {#                                    <button type="button" id="fullscreen-btn">全屏切换#}
                                    </button>
                                    {#                                    <label id="browserTip">使用谷歌或火狐来进行编辑获得最佳体验</label>#}
                                    <div id="editor">
                                        {{ form.acceptance_criteria }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <div class="form-group clearfix">

                            <div class="col-md-6 pd-0">
                                <label for="{{ form.status.id_for_label }}"
                                       class="col-md-4 control-label">{{ form.status.label }}</label>
                                <div class="col-md-8 clearfix">
                                    <div>
                                        {{ form.status }}
                                    </div>
                                    <div class="error-msg"></div>

                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for=" {{ form.priority.id_for_label }}"
                                       class="col-md-4 control-label">{{ form.priority.label }}</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.priority }}
                                    </div>
                                    <div class="error-msg"></div>

                                </div>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">指派给</label>
                                <div class="col-md-8">
                                    {{ form.assign }}
                                    <div class="error-msg"></div>
                                </div>
                            </div>

                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">关注者</label>
                                <div class="col-md-8">

                                    {{ form.attention }}

                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">开始时间</label>
                                <div class="col-md-8">

                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.start_date }}
                                    </div>
                                    <span class="error-msg"></span>

                                </div>
                            </div>

                            <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">截止时间</label>
                                <div class="col-md-8">

                                    <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                                        </span>
                                        {{ form.end_date }}
                                    </div>
                                    <span class="error-msg"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">

                            {% comment %}   <div class="col-md-6 pd-0">
                                <label for="inputPassword3" class="col-md-4 control-label">模式</label>
                                <div class="col-md-8">
                                    <div>
                                        {{ form.mode }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>{% endcomment %}

                            <div class="col-md-6 pd-0">

                                <label for="inputPassword3" class="col-md-4 control-label">
                                    {% if story_object.parent %}
                                        <a href="{% url 'story_detail' project_id=request.web.project.id story_id=story_object.parent.id %}">
                                            查看
                                        </a>
                                    {% endif %}
                                    父需求</label>

                                <div class="col-md-8">

                                    {{ form.parent }}

                                    <div class="error-msg"></div>
                                </div>
                            </div>

                            <div class="col-md-6 pd-0">

                                <label for="inputPassword3" class="col-md-4 control-label">
                                    {% if story_object.iteration_number %}

                                    {% endif %}
                                    迭代次数</label>

                                <div class="col-md-8">
                                    <input type="text" hidden="hidden" style="">

                                    {{ form.iteration_number }}

                                    <div class="error-msg"></div>
                                </div>
                            </div>

                            {#                          <div class="col-md-6 pd-0">#}
                            {#                                <label for="inputPassword3" class="col-md-4 control-label">模式</label>#}
                            {#                                <div class="col-md-8">#}
                            {#                                    <div>#}
                            {#                                        {{ form.mode }}#}
                            {#                                    </div>#}
                            {#                                    <div class="error-msg"></div>#}
                            {#                                </div>#}
                            {#                            </div>#}
                            {#                            <div class="form-group clearfix" style="padding-top: 5%">#}

                            {% if child_list %}
                                <div class="col-md-12 pd-0" style="padding-top: 2%">
                                    <label for="inputPassword3" class="col-md-1 control-label"> 子需求</label>
                                    {#                            </div>#}
                                    <div class="col-md-12 pd-2">
                                        <div class="list-group">
                                            {% for item in child_list %}
                                                <span class="col-md-12 pd-0">
                                        <a href="{% url 'story_detail' project_id=request.web.project.id story_id=item.0 %}"
                                           class="list-group-item">
                                         {{ item.0 }} - {{ item.1 }}
                                        </a>
                                        </span>
                                            {% endfor %}
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            {% if story_child_list %}
                                <div class="col-md-12 pd-0" style="padding-top: 2%">
                                    <label for="inputPassword3" class="col-md-1 control-label">子任务</label>
                                    {#                            </div>#}
                                    <div class="col-md-12 pd-2">
                                        <div class="list-group">
                                            {% for item in story_child_list %}
                                                <span class="col-md-12 pd-0">
                                        <a href="{% url 'issues_detail' project_id=request.web.project.id issues_id=item.0 %}"
                                           class="list-group-item">
                                         {{ item.0 }} - {{ item.1 }}
                                        </a>
                                        </span>
                                            {% endfor %}
                                            <div class="error-msg"></div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                        </div>
                        {#                        </div>#}


                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 操作记录
                </div>
                <div class="panel-body comment-area">

                    <div class="comment-list" style="word-wrap:break-word;word-break:break-all;height: 100px;min-height: 55.3vh;
                    display: block;overflow-y: scroll;">
                    </div>

                    <hr/>
                    <div class="comment-text" id="commentText">

                        <div class="form-group">
                            <textarea id="content" rows="6" class="form-control"
                                      placeholder="请输入要回复的内容"></textarea>
                            <span class="error-msg"></span>
                        </div>

                        <input class="btn btn-primary" type="button" id="btnSubmit" value="提 交 (ctrl+enter)">
                        <div class="reply-user hide" id="replyUser">
                            回复 <span></span>
                            <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </div>


    <div class="hide" id="recordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre></pre>
                <div class="desc">
                    <div class="msg">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>

                    <a href="javascript:void(0)" class="reply">
                        <i class="fa fa-commenting-o" aria-hidden="true"></i> 回复
                    </a>

                    <input class="commentId" hidden="hidden" value=""/>


                </div>
            </div>
            <div class="child">

            </div>
        </div>
    </div>

    <input id="csrf_token" value="{{ csrf_token }}" hidden="hidden"/>

{% endblock %}

{% block js %}
    <script src="{% static 'web/plugin/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'web/plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>

    <script>


        var WIKI_UPLOAD_URL = "{% url 'wiki_upload' project_id=request.web.project.id %}";
        var STORY_RECORD_API = "{% url 'story_record' project_id=request.web.project.id story_id=story_object.id %}";
        var STORY_CHANGE_API = "{% url 'story_change' project_id=request.web.project.id story_id=story_object.id %}";
        var EDITOR;


        $(function () {
            initEditorMd();
            initDatePicker();
            initIssuesRecord();
            bindReply();
            bindCancelReplyUser();
            bindSubmit();
            bindChangeStory();

        });

        /**
         *
         * 初始化时间选择器
         * */
        function initDatePicker() {
            $('#id_start_date,#id_end_date').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: 'zh-CN',
                autoclose: true
            })
        }

        /**
         * 初始化markdown编辑器
         */
        function initEditorMd() {
            EDITOR = editormd('editor', {
                placeholder: "请输入内容",
                height: 300,
                path: "{% static 'web/plugin/editor-md/lib/' %}",
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL,
                toolbarAutoFixed: false,
                toolbarIcons: function () {
                    return ["bold", "hr", "del", "italic", "quote", "|", "image", "preview", "watch", "fullscreen", "||", "save"]
                },
                toolbarCustomIcons: {
                    save: "<input type='button' value='保 存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                },
                onload: function () {
                    this.previewing()
                }
            })
        }


        /**
         * 初始化评论
         */
        function initIssuesRecord() {
            $.ajax({
                url: STORY_RECORD_API,
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    console.log('initIssuesRecord res.data ', res.data)
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            console.log('initIssuesRecord item ', item)
                            createRecordNode(item);
                        });
                    }
                }
            })
        }

        /**
         * 创造节点
         * @param nodeDict
         */
        function createRecordNode(nodeDict) {
            console.log('nodeDict:', nodeDict)
            console.log('createRecordNode', createRecordNode)
            var $item = $("#recordTemplate").find('.item').clone();
            $item.find('.left-avatar').html(nodeDict.creator[0].toUpperCase());
            $item.find('pre').html(nodeDict.content);
            $item.find('.commentId').val(nodeDict.id);
            $item.find('.delComment').val(nodeDict.id);
            $item.find('.user').html(nodeDict.creator);
            $item.find('.type').html(nodeDict.reply_type_text);
            $item.find('.date').html(nodeDict.datetime);
            $item.attr({id: nodeDict.id, username: nodeDict.creator});
            console.log("$item:", $item)
            console.log("$item.id:", $item.attr('id'))
            console.log('nodeDict', nodeDict)
            console.log('nodeDict type ', nodeDict.reply_type_text)
            console.log('commentId>>>', nodeDict.id)
            if ('{{ request.web.user }}' === '{{story_object.creator }}' || nodeDict.creator === '{{ request.web.user }}') {
                const delBtn = '<a href = "javascript:void(0)" onclick = "delComment(' + nodeDict.id + ')" class= "delComment" >' +
                    '<i class= "fa fa-close" aria - hidden = "true" > </i> 删除' +
                    '</a>'
                {#console.log("$item.find('.desc').",$item.find('.desc'))#}
                $item.find('.desc').append(delBtn);
            }

            {% comment %}   {% if request.web.user == story_object.creator or nodeDict.creator ==  request.web.user%}

               {% endif %}{% endcomment %}
            if (nodeDict.parent_id) {
                console.log('nodeDict.parent_id')
                // 挂在谁下
                $('#' + nodeDict.parent_id).children('.child').append($item);
            } else {
                console.log('else')
                // 根下
                $('.comment-list').prepend($item);
            }
        }

        /**
         回复问题
         */
        function bindReply() {
            $('.comment-list').on('click', '.reply', function () {
                var $item = $(this).parent().parent().parent();
                var id = $item.attr('id');
                var username = $item.attr('username');
                $('#replyUser').removeClass('hide').attr('parent-id', id).children('span').text(username);
                document.getElementById('content').focus();
            })
        }

        /**
         取消回复
         */
        function bindCancelReplyUser() {
            $('#replyUser').click(function () {
                $(this).addClass('hide').removeAttr('parent-id').children('span').text("");
            })
        }

        //add listener to ctrl + enter to send the message
        document.getElementById("commentText").addEventListener("keydown", function (event) {
            if ((event.ctrlKey || event.metaKey) && event.keyCode === 13) {
                layer.msg('提交中')
                event.preventDefault();
                // 执行你想要的操作
                commentSubmit()
            }
        });

        function commentSubmit() {
            $('#commentText .error-msg').text('');
            $.ajax({
                url: STORY_RECORD_API,
                type: 'POST',
                data: {
                    content: $('#content').val(),
                    reply: $('#replyUser').attr('parent-id')
                },
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        //添加节点
                        createRecordNode(res.data);
                        //清空页面
                        $('#content').val('');
                        $('#replyUser').addClass('hide').removeAttr('parent-id').children('span').text('');

                    } else {
                        $.each(res.error, function (k, v) {
                            $('#content').next('.error-msg').text(v[0]);
                        })
                    }
                }
            })
        }

        /**
         * 点击评论
         */
        function bindSubmit() {
            $('#btnSubmit').click(function () {
                commentSubmit()
            });

        }

        /**
         * 表单数据更新
         */
        function bindChangeStory() {
            $('#editForm').find('.form-control ').change(function () {
                //内容变更
                var postDict = {
                    name: $(this).attr('name'),
                    value: $(this).val()
                };
                postAjaxData(postDict);
            })
        }

        /**
         * MARKDOWN编辑器数据保存
         */
        function saveDesc() {
            var postDict = {name: 'description', value: EDITOR.getValue()};
            postAjaxData(postDict);
        }

        /**
         * 将获取到的数据通过ajax发送到后台
         * @param postDict
         */
        function postAjaxData(postDict) {
            $('#id_' + postDict.name).parent().next('.error-msg').text("");
            console.log('postAjaxData:', postDict);
            $.ajax({
                url: STORY_CHANGE_API,
                type: 'POST',
                header: {
                    "Content-Type": "application/json;charset=utf-8"
                },
                data: JSON.stringify(postDict),
                dataType: 'JSON',
                success: function (res) {
                    console.log('res', res)
                    if (res.status) {
                        createRecordNode(res.data);
                        location.reload()
                    } else {
                        $('#id_' + postDict.name).parent().next('.error-msg').text(res.error);
                    }
                }
            })
        }

        function showFullScreenBtn2Preview() {
            $('#fullscreen-btn').show()
            $('#browserTip').hide()
        }

        function hideFullScreenBtn2Preview() {
            $('#fullscreen-btn').hide()
            $('#browserTip').show()
        }

        function browserDetect() {
            var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
            console.log(userAgent)

            var isFirefox = navigator.userAgent.indexOf('Firefox') > -1  // 是否是火狐  ，火狐内核Gecko
            console.log('火狐' + isFirefox)  // 返回 true  则是 ，false  则不是


            var isWebKit = navigator.userAgent.indexOf('WebKit') > -1  // 是否是WebKit 内核
            console.log('谷歌内核' + isWebKit)  // 返回 true  则是，false  则不是

            var isChrome = navigator.userAgent.indexOf('Chrome') > -1  // 是否是谷歌
            console.log('谷歌' + isChrome)  // 返回 true  则是 ，false  则不是

            var isOpera = navigator.userAgent.indexOf('Opera') > -1  // 是否是opera ， opera内核 Presto
            console.log('Opera' + isOpera)  // 返回 true  则是 ，false  则不是

            var isTrident = navigator.userAgent.indexOf('Trident') > -1  // 是否是IE内核
            console.log('IE内核' + isTrident)  // 返回 true  则是 ，false  则不是

            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera
            console.log('IE ' + isIE)  //判断是否IE浏览器
            //  因为ie10-ie11的版本问题，不再支持document.all判断，所以ie判断函数要重新写
            var isIeL = !!window.ActiveXObject || "ActiveXObject" in window
            console.log('IELLQ ' + isIeL)  //判断是否IE浏览器

            var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") > 0
            console.log('IE999 ' + isIE9)  //判断是否IE9  ;如果是其他IE版本，则 MSIE 7.0   MSIE 8.0


            if (isFirefox || isChrome) {
                showFullScreenBtn2Preview()
            } else {
                hideFullScreenBtn2Preview()
            }
            // 判断是否为移动端
            var browser = {
                versions: function () {
                    var u = navigator.userAgent;
                    return {
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
                        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
                        iPhone: u.indexOf('iPhone') > -1, //iPhone
                        iPad: u.indexOf('iPad') > -1, //iPad
                        webApp: u.indexOf('Safari') > -1 //Safari
                    };
                }()
            }
            var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad
            console.log('是否为移动端' + isPhone)

// JS判断浏览器是否是IE9以下，处理可能遇到的兼容性问题
            if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                console.log("您的浏览器版本过低，请使用IE9及以上版本");
            }
        }

        browserDetect()

        $('#fullscreen-btn').click(function () {

            var modal = $('#editor'); // 弹出框的ID
            if (modal.hasClass('fullscreen')) {
                // 如果已经是全屏状态，则退出全屏
                let removeClass = modal.removeClass('fullscreen');
                if (!removeClass) {
                    document.exitFullscreen();
                }
                //再次进入全屏
                modal.addClass('fullscreen');
                var element = modal.get(0);
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                }
            } else {
                // 否则进入全屏
                modal.addClass('fullscreen');
                var element = modal.get(0);
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                }
            }
        });

        function collect(issue_id, pk) {
            $.ajax({
                url: "{% url 'make_collect' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'issue_pk': pk,
                    'issue_id': issue_id,
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        console.log(res.status)
                        {#location.reload();#}
                    } else {

                    }
                }
            })
        }

        function toChild(child_id) {
            let child_url = "{% url 'issues_detail' project_id=request.web.project.id issues_id=12345 %}"
            child_url.replace(/12345/, child_id.toString)
            window.location.href = child_url
        }

        function delComment(reply_id) {
            $.ajax({
                url: "{% url 'del_reply' project_id=request.web.project.id %}",
                type: "POST",
                data: {
                    'reply_id': reply_id,
                    'story_id':{{ story_object.id }},
                    "csrfmiddlewaretoken": $("#csrf_token").val()
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        console.log(res.status)
                        location.reload();
                    } else {

                    }
                }
            })
        }


    </script>

{% endblock %}